<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="['customFields'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm"
        width="700px"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ t('自定义字段是否必填') }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="show-info" :class="'ba-' + baTable.form.operate + '-form'">
                        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选/反选</el-checkbox>
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(cusfield,index) in cusfieldArray" :key="index" :label="cusfield.field" :value="cusfield.field">
                                {{cusfield.name  }}
                            </el-checkbox>
                        </el-checkbox-group>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm()">{{ t('Cancel') }}</el-button>
                <el-button @click="confirmClick()" v-blur :loading="baTable.form.submitLoading" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('提交') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import type { DrawerProps } from 'element-plus'
import { onMounted, provide,inject, ref, reactive } from 'vue'
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref([])
const cusfieldArray = ref([])
import { useI18n } from 'vue-i18n'
import { useConfig } from '/@/stores/config'
import { customFieldsSave,getCustomFields} from '/@/api/backend/hourse'
const { t } = useI18n()
const config = useConfig()
import type baTableClass from '/@/utils/baTable'
const baTable = inject('baTable') as baTableClass
const handleCheckAllChange = (val: boolean) => {
  console.log(val);
  let all_checked=[]
  cusfieldArray.value.forEach((item) => {
    all_checked.push(item.field)
  })
  checkedCities.value = val ? all_checked : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
    console.log(value,'>>>');
    
  const checkedCount = value.length
  checkAll.value = checkedCount === cusfieldArray.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cusfieldArray.length
}

const initCustomFields=()=>{
    cusfieldArray.value=[]
    getCustomFields().then((result) => {
        cusfieldArray.value=result.data.custom_fields;
        checkedCities.value=result.data.checked_fields;
    }).catch(err=>{
        console.log(err)
    })
}
onMounted(() => {
    initCustomFields()
}) 
function cancelClick() {}
function confirmClick() {
    baTable.form.submitLoading = true
    customFieldsSave({'custom_fields':checkedCities.value})
        .then((result) => {
            baTable.form.submitLoading = false
            baTable.form.operate! = ''
            ElNotification({
                title: '',
                message: result.msg|'提交成功',
                type: 'success',
            })
            setTimeout(() => {
                baTable.getIndex()
            }, 2000)
        })
        .catch((err) => {
            baTable.form.submitLoading = false
        })
}
</script>
<style scoped>
.show-info {
    .el-row {
        margin-bottom: 20px;
    }
    .label-title {
        color: #b1b3b4;
    }
}
</style>
